// 模拟服务器上的传递过来的数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
];

let apiLink = document.querySelector('.api-link');

// 保存组装好的数据
let apiHtml = '';
// 遍历数组apiTypeData，将name属性值组装成html代码，组装好后放进link
apiTypeData.forEach(function(v, i) {
    /**
     * if (v.isnew) {
     * // 将其组装为html结构
     * apiHtml += `<a class='bold' href="#">${v.name}</a>`;
     *} else {
     * apiHtml += `<a href="#">${v.name}</a>`
     *}
     */


    // 强制给第一个赋初始化
    if (i == 0) {
        // 利用三元运算符,添加自定义属性加data
        apiHtml += `<a href='#' class="active ${v.isnew ? 'bold' : ''}" data-keyword="${v.keyword}">${v.name}</a>`;
        return;
    }
    apiHtml += `<a href='#' class="${v.isnew ? 'bold' : ''}" data-keyword="${v.keyword}">${v.name}</a>`;


});
//将组装好的数据渲染到apiLink中
apiLink.innerHTML = apiHtml;

/**
 * 2.需求:利用事件委派,给api-link注册点击事件，将当前事件源的文本渲染到apiTips,
 * 获取当前事件源的自定义展性keyword ,渲染给api-search-text
 * 注意:事件委派中this不能代表当前触发对象,慎用
 *      事件委派中:事件源- e.target
 */
/*
let apiTips = document.querySelector('#apiTips');
let apiSearchText = document.querySelector('.api-search-text');
apiLink.addEventListener('click', function(e) {
    //筛选出事件源:筛选出触发事件的标签对象
    if (e.target.nodeName === 'A') {
        apiTips.textContent = e.target.textContent;
        //获取当前事件源的自定义属性data-keyword
        apiSearchText.placeholder = e.target.dataset.keyword;
    }
})*/


let apiTips = document.querySelector('#apiTips');
let apiSearchText = document.querySelector('.api-search-text');
let apiLinkA = document.querySelectorAll('.api-link a');

let index = 0;
apiLinkA.forEach(function(dom, i) {
    dom.addEventListener('click', function() {
        apiLinkA[index].classList.remove('active'); //清除上一个a的激活样式
        this.classList.add('active'); //给当前添加激活样式
        index = i; //将当前索引i赋值给index
        apiTips.textContent = this.textContent; //将当前文本设置到apiTips中
        apiSearchText.placeholder = this.dataset.keyword
    })

})


//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

];

/**
 * 渲染Api列表
 */
//保存api列表html代码
let apiListHTML = '';
// 遍历listDataArr
listDataArr.forEach(function(v, i) {
    apiListHTML += ` 
            <li>
            <span class="qiye ${v.isSpecial ? 'on' : '' }">企业专用</span>
                <a href="../apidetail/apidetail.html">
                    <img src="../../assets/imgs/${v.img}" alt="">
                    <p>${v.name}</p>
                    <p class="${v.price === '免费'?'green':'red'}">${v.price}</p>
                </a>
               
                <button onclick='toggeMask()'>申请数据</button>
            </li>`
});

// 渲染到apiLIst中
let apiList = document.querySelector('.api-list');
apiList.innerHTML = apiListHTML;


// 显示或者隐藏弹出框
let other = document.querySelector('.other');
let box = document.querySelector('.box');

function toggeMask() {
    other.style.display = 'block';
    box.style.display = 'block'
}

other.addEventListener('click', function() {
    other.style.display = 'none';
});

box.addEventListener('click', function(e) {
    //筛选出事件源:筛选出触发事件的标签对象
    e.stopPropagation()
})


// 分页器点击事件
let pages = document.querySelectorAll('.page li');
let pageBtn = document.querySelector('.pageBtn');
let int = 0;
pages.forEach(function(a, b) {
    a.addEventListener('click', function() {
        pages[int].classList.remove('act');
        this.classList.add('act');
        int = b;
    });

});
pageBtn.addEventListener('click', function() {
    pages[int].classList.remove('act');
    pages[int + 1].classList.add('act');
    int = int + 1;
    if (int == pages.length - 1) {
        // 禁止点击
        pageBtn.style.pointerEvents = 'none';
        // console.log(int);
    }
})